<template>
  <div class="user_info">
    <!--未登录-->
    <template v-if="!store.state.user.profile.token">
      <div class="headImg">
        <img src="@/assets/logo.png" alt="sds" />
      </div>
      <div class="loding">登录/注册</div>
      <router-link to="/user/login">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-to_right"></use>
        </svg>
      </router-link>
    </template>
    <!--已登录-->
    <template v-else>
      <!--left头像-->
      <div class="headImg">
        <img src="@/assets/logo.png" alt="sds" />
      </div>
      <!--right资料-->
      <div class="userInfo">
        <div class="user_name">
          <span class="info-name">
            {{ userInfo.user_name }}
            <svg class="nannv_icon" aria-hidden="true">
              <use
                :xlink:href="
                  userInfo.user_sex == '女' ? '#icon-nannv' : '#icon-nannv-copy'
                "
              ></use>
            </svg>
          </span>
        </div>
        <div class="user_intro">
          <span>简介:</span>
          <p>
            {{ userInfo.user_intro ? `${userInfo.user_intro}` : "暂无介绍" }}
          </p>
        </div>
        <div class="user_atte">
          <span class="info-atte"
            >零钱:<i>{{ store.state.user.profile.user_money }} $</i></span
          >
        </div>
      </div>
      <!--编辑-->
      <div class="use_dan">
        <svg class="icon" aria-hidden="true" @click="backLogin">
          <use xlink:href="#icon-daochu1024-30"></use>
        </svg>
      </div>
    </template>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { ref } from "vue";

export default {
  name: "UserInfo",
  setup() {
    const store = useStore();
    const userInfo = ref(store.state.user.profile);
    // console.log(store.state.user.profile);
    const backLogin = () => {
       store.commit('user/setUser',{token:''})
      location.reload()
    }
    return { userInfo ,store,backLogin};
  },
};
</script>

<style scoped lang="less">
.icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.2em;
  fill: currentColor;
}
.nannv_icon {
  position: absolute;
  top: -0.5rem;
  right: -1.5rem;
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
  fill: currentColor;
}
.user_info {
  flex: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffa6002e;
  background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2FG8CjJjHjkPUwyYRkwg0JtnUPAxyTONWuC%3DLGMjasG6y6O1534227355606.png&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647429534&t=88afbc7177848b763414e00a73d0c309");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 10rem;
  padding: 0 1.2rem;
  box-sizing: border-box;
  .headImg {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    border: 1px solid #c8c9cc;
    img {
      height: 100%;
    }
  }
  .loding {
    font-size: 1.5rem;
    color: #969799;
    text-shadow: 2px 1px #c8c9cc;
  }
  .userInfo {
    width: 60%;
    .info-name {
      position: relative;
      font-size: 1.3rem;
      font-weight: 600;
      color: #000;
    }
    .user_intro {
      display: flex;
      padding-right: 1rem;
      box-sizing: border-box;
      span {
        white-space: nowrap;
        color: #ed6a0ce0;
      }
      p {
        margin: 0;
        font-size: 0.85rem;
        color: #545559;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .user_atte {
      margin-top: 0.2rem;
      .info-atte {
        color: #795f80;
        i {
          color: #e27070db;
        }
      }
    }
  }
  .use_dan {
    position: absolute;
    top: 1rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
